import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '步骤时间线',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('步骤时间线'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Theme(
              data: Theme.of(context).copyWith(primaryColor: Colors.black),
              child: Stepper(
                  currentStep: _currentStep,
                  onStepTapped: (index) {
                    setState(() {
                      _currentStep = index;
                    });
                  },
                  onStepContinue: () {
                    // 点击继续按钮
                    setState(() {
                      _currentStep < 2 ? _currentStep++ : _currentStep = 0;
                    });
                  },
                  onStepCancel: () {
                    setState(() {
                      _currentStep > 0 ? _currentStep-- : _currentStep = 0;
                    });
                  },
                  steps: [
                    Step(
                      title: Text('注册'),
                      subtitle: Text('请先注册'),
                      content: Text('使用手机号注册'),
                      isActive: _currentStep == 0,
                    ),
                    Step(
                      title: Text('登录'),
                      subtitle: Text('登录使用'),
                      content: Text('不登录不能使用'),
                      isActive: _currentStep == 1,
                    ),
                    Step(
                      title: Text('完善资料'),
                      subtitle: Text('填写资料'),
                      content: Text('不填写资料不能使用'),
                      isActive: _currentStep == 2,
                    ),
                  ]),
            ),
          ],
        ),
      ),
    );
  }
}
